<template>
  <el-card class="box-card">
    <div slot="header" class="box-header">
      <span>{{ title }}</span>
      <div class="box-operator">
        <slot name="operator"/>
      </div>
    </div>
    <div class="box-body">
      <div v-if="showSearch" class="search">
        <slot name="search"></slot>
      </div>
      <div class="box-content">
        <slot name="content"></slot>
      </div>
      <div class="box-footer">
        <slot name="page"></slot>
      </div>
    </div>
  </el-card>
</template>
<script>
export default {
  name: "BoxCard",
  props: {
    title: String,
    showSearch: {
      type: Boolean,
      default: true
    }
  }
}
</script>
<style scoped lang="scss">
@import "../../assets/styles/variables";

::v-deep.box-card {
  .el-card__header {
    height: 40px;
    padding: 5px 15px;

    .box-header {
      font-size: $base-title-font-size;

      .box-operator {
        float: right;
      }
    }
  }
  .el-card__body {
    padding: 12px !important;
    .box-body {
      height: 100%;
      padding: 12px;
    }
    .box-footer {
      margin-top: 5px;
    }
  }
}
</style>
